<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="./css/bar.css">
  <link rel="stylesheet" href="../css/layui.css"  media="all">
  <script src="/static/jquery-1.8.0.min.js"></script>
  <title>个人账单</title>
</head>
<body>
<div>
<ul class="layui-nav">
  <li class="layui-nav-item layui-this">
    <a href="index.html">全体账单</a>
  </li>
  <li class="layui-nav-item layui-this"><a href="personalreceivablebills.html?name=dhq">海权</a></li>
  <li class="layui-nav-item layui-this"><a href="personalreceivablebills.html?name=toshi">toshi</a></li>
  <li class="layui-nav-item layui-this"><a href="personalreceivablebills.html?name=lgh">贵豪</a></li>
</ul>
</div>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo" style="position:relative;">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="showReceivable">应收账单</button>
  </div>
</script>


<script src="../layui.js" charset="utf-8"></script>
<script src="js/tool.js" charset="utf-8"></script>
<script>
  var name =  getParams("name");
  //此处注意异步加载
  layui.use('element', function(){
    var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
    
    //监听导航点击
    element.on('nav(demo)', function(elem){
      //console.log(elem)
      layer.msg(elem.text());
    });
  });
  var data;
    $.ajax({
    type: 'get'
    ,url: "/bills/payable/" + name
    ,contentType: "application/x-www-form-urlencoded"
    ,async: false
    ,dataType: 'json'
    ,success: function(res){
      data = res;
      console.log(data);
      for (var i = 0; i < data.length; i++) {
        data[i].payTime =timestampToTime(data[i].payTime);
        data[i].money = (data[i].money).toFixed(2); 
      }
    }
  });
  layui.use('table', function(){
    var table = layui.table;
    //表格渲染
    table.render({
      elem: '#test'
      ,title: '用户数据表'
      ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
      ,cols: [[
          {field:'message', title:'账单', width:300, edit: 'text', align:'center'}
          ,{field:'drawee', title:'付款人', width:100, align:'center'}
          ,{field:'payTime', title:'付款时间', width:140,sort:true,align:'center'}
          ,{field:'money', title:'应付', width:100, align:'center'}
        ]]
      ,page: true
      ,data: data
    });
  //头工具栏事件
    table.on('toolbar(test)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id);
      switch(obj.event){
        case 'showReceivable':
          window.location.href = "personalreceivablebills.html?name=" + name;
          break;
        //自定义头工具栏右侧图标 - 提示
        case 'LAYTABLE_TIPS':
          layer.alert('这是工具栏右侧自定义的一个图标按钮');
        break;
      };
    });
  });
</script>

</body>
</html>